//学习jquery插件开发
$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
});
$.sayHello();
$.sayHello('Rose');

$.extend({
    log: function() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        var hours = now.getHours();
        var min = now.getMinutes();
        var sec = now.getSeconds();

        time = year + "-" + month + "-" + day + "  " + hours + ":" + min + ":" + sec;
        console.log(time);

        var setInterval = setInterval(log, 1000)
    }

});



//fn对象方式

// $.fn.pluginName = function() {
//     this.css('color', 'red');
// }


//this用噶

// $.fn.myPlugin = function() {
//         this.css('color', 'red');
//         this.each(function() {
//             $(this).append('' + $(this).attr("href"));
//         })
//     }


//插件不打破这种链式调用，只需return一下即可。
/*
 $.fn.myPlugin = function() {
    this.css("color", 'blue');
    return this.each(function() {
        $(this).append('' + $(this).atttr("href"));
    });
}
*/


//添加默认值 (缺点就是会覆盖默认值，当再次使用的时候，默认值已经被覆盖，下一步会优化)
/*
$.fn.myPlugin = function(options) {
    var defaults = {
        'fontSize': '12px',
        'color': 'blue'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}
*/

//好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
/*
$.fn.myPlugin = function(options) {
    var defaults = {
        'fontSize': '12px',
        'color': 'blue'
    };
    var settings = $.extend( {}, defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}
*/
//面向对象的插件开发

$.fn.beautifer = function(ele, opt) {
    this.$element = ele,
    //设置默认值
        this.defaults = {
            'color': 'red',
            'fontSize': "20px",
            'textDecoration': 'none'
        }

    this.options = $.extend({}, defaults, opt);

    //定义一个beauty方法
    beautifer.prototype = {
        beauty: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }

    // 在插件中使用beauty对象

    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifer = new beautifer(this, options);
        //调用其方法
        return beautifer.beauty();

    }
}

//用自调用匿名函数包裹你的代码
;(function($){

	//定义Beautifier的构造函数
	var beautifer = function(ele, opt) {
	    this.$element = ele,
	    //设置默认值
	    this.defaults = {
	        'color': 'red',
	        'fontSize': "20px",
	        'textDecoration': 'none'
	    }

	    this.options = $.extend({}, defaults, opt); //接收插件参数
	}

    //定义一个beauty方法
    beautifer.prototype = {
        beauty: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }

    // 在插件中使用beauty对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifer = new beautifer(this, options);
        //调用其方法
        return beautifer.beauty();

    }
})(jQuery);

